<template>
	<div>
	  <myheader></myheader>
		
		<div id="carousel" class="carousel slide" data-ride="carousel">
		
	
			<!-- <ul class="carousel-indicators">
				<li data-target="#carousel" data-slide-to="0" class="active"></li>
				<li data-target="#carousel" data-slide-to="1"></li>
				<li data-target="#carousel" data-slide-to="2"></li>
			</ul> -->
	
			<div class="carousel-inner">
			
				<!--Text only with background image-->
				<!-- <div class="carousel-item active">
					<div class="container slide-textonly">
						<div>
							<h1>York &amp; Smith</h1>
							<p class="lead">Spring/Summer 2018 Collection</p>
							<a href="#" class="btn btn-outline-secondary">View Collection</a>
						</div>
					</div>
				</div> -->
				
				<!-- 幻灯片组件 -->
				<Carousel :height='700' :datas='params' @click="click" pageTheme='circle'>

				</Carousel>

			</div>
		</div>
		<section class="collections text-center ">
			<div class="container-fluid">
				<div class="row">
					<div class="collection col-md-6 alt-background">
						<div class="container container-right text-center">
							<div>
								<h1>Women's</h1>
								<p class="lead">Spring/Summer 2018 Collection</p>
								<a href="catalog.html" class="btn btn-outline-secondary">Browse Women's</a>
							</div>
						</div>
					</div>
					<div class="collection col-md-6 bg-secondary inverted">
						<div class="container container-left text-center">
							<div>
								<h1>Men's</h1>
								<p class="lead">Spring/Summer 2018 Collection</p>
								<a href="catalog.html" class="btn btn-outline-white">Browse Men's</a>
							</div>
						</div>
					</div>
				</div>
			</div>
    </section>
    
		<section class="featured-block text-center">
			<div class="container">
				<div class="row justify-center">
					<div class="col-md-6 text-center">
						<img class="mt-4 mb-4 img-fluid" src="../assets/images/placeholder-jacket.png" style="width: 100%;">
					</div>
					<div class="col-md-6 text-center text-md-left">
						<h2 class="mb-3">Spring/Summer Collection 2018</h2>
						<p class="lead mt-2 mb-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse cursus erat sed sem sagittis cursus.</p>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed odio dui. Suspendisse cursus erat sed sem sagittis cursus. Etiam porta sem malesuada magna mollis euismod.</p>
						<a href="#" class="btn btn-md btn-outline-primary mt-3">Shop Now</a>
					</div>
				</div>
			</div>
		</section>

		<div class="divider"></div>

		<section class="products text-center">
			<div class="container">
				<h3 class="mb-4">商品排行榜</h3>
				<div class="row">
					<div v-for="(i,index) in goodrank_list" :key="index">
						<p v-if="index<3" style="color:red">top{{ index+1 }}： <a :href="'/item?id='+i.id">{{ i.name }}</a></p>
          				<p v-else>top{{index+1}}： <a :href="'/item?id='+i.id">{{i.name}}</a></p>
					</div>
				</div>
			</div>
		</section>
		
		<div class="divider"></div>
		
		<section class="products text-center">
			<div class="container">
				<h3 class="mb-4">商品展示</h3>
				<div class="row">
					<!-- 遍历商品 -->
					<div v-for="item in datalist" class="col-sm-6 col-md-3 col-product">
						<figure>
							<a :href="'/item?id=' + item.id"><img class="rounded-corners img-fluid" :src="'http://127.0.0.1:8000/static/upload/' + item.img + ''" width="240" height="240"></a>
							<figcaption>
								<div class="thumb-overlay"><a :href="'/item?id=' + item.id" title="More Info">
									<i class="fas fa-search-plus"></i>
								</a></div>
							</figcaption>
						</figure>
						<h4><a :href="'/item?id=' + item.id">{{ item.name }}</a></h4>
						<p><span class="emphasis">${{ item.price }}</span></p>
						<h4><a :href="'/editgood?id=' + item.id">修改商品</a></h4>
					</div>
				</div>

				<!-- HeyUI分页逻辑 -->
				<div>
					<Pagination v-model="pagination" @change="change" align="center" layout="total, pager, jumper" small></Pagination>
				</div>

				<!-- 自主分页逻辑 --> 
				<div>

					<a @click="getdata(lastpage)" v-show="lastpage">上一页</a>

					<ul>
						
						<li v-for="index in all">
							
							<a @click="getdata(index)">{{ index }}</a>

						</li>

					</ul>

					<a @click="getdata(nextpage)" v-show="nextpage">下一页</a>
						
				</div>
			</div>
		</section>
		
		<div class="divider"></div>
		
		<section class="cta text-center">
			<div class="container">
				<h3 class="mt-0 mb-4">Sign up now to save 10% on your first order</h3>
				<form class="subscribe">
					<div class="form-group row pt-3">
						<div class="col-sm-8 mb-3">
							<input type="text" class="form-control" id="inputName" placeholder="Your Name">
						</div>
						<div class="col-sm-4">
							<button type="submit" class="btn btn-lg btn-outline-primary">Sign me up</button>
						</div>
					</div>
				</form>
			</div>
		</section>
		
		<myfooter/>
    
	</div>
  
</template>


 
<script>
// 组件包含
import myheader from './myheader'
import myfooter from './myfooter'

export default {
  data () {
    return {
	  msg: "这是一个变量",
	  // 幻灯片数据
	  params: [],
	  // 商品列表
	  datalist: [],
	  // 分页器变量
	  pagination: {
		  page: 1,
		  size: 3,
		  total: 5
	  },
	  // 自主分页
	  total: 0,  // 商品总数
	  cur: 1,  // 当前页
	  all: 0,  // 总页数
	  lastpage: 0,  // 上一页
	  nextpage: 0,  // 下一页 
	  size: 2, // 每页显示2个
	  // 排行榜列表
	  goodrank_list: []
    }
  },

  // 定义组件
  components: {
	  'myheader': myheader,
	  myfooter,
  },

  mounted: function () {
	// 调用排行榜接口
	this.goodrank();

	// 调用自主分页接口
	// this.getdata(1);

	// 请求商品接口
	// 发送请求
	this.axios.get('http://127.0.0.1:8000/goodslist/', {
		params: {
			page: 1,
			size: 3
		}
	})
	  .then((result) => {
		  console.log(result);
		  this.datalist = result.data.data;
	})

	// 展示幻灯片
	// 发送请求
	this.axios.get('http://127.0.0.1:8000/picslist/')
	  .then((result) => {
		  var mylist = result.data;
		  var datalist = [];

		  // 遍历
		  for(let i = 0, l = mylist.length; i < l; i++){
			  datalist.push({
				title: mylist[i]['title'],
				link: mylist[i]['link'],
				image: mylist[i]['img']
				  });
		  }
		  this.params = datalist;
	  })
  },

  methods:{
	// 获取排行榜
	goodrank(){
		//  请求
	this.axios({
		//发送请求
		url: 'http://127.0.0.1:8000/goodrank/',
		params: {
		},
	}).then(res => {
		this.goodrank_list = res.data;
	});
	},

	// 自主分页接口
	// getdata: function (mypage) {
  	//     // 发送请求
    //     this.axios.get('http://127.0.0.1:8000/goodslist/',{
	// 		params:{
	// 			page: mypage,
	// 			size: this.size
	// 		}}).then((result) =>{

	// 		console.log(result);
	// 		this.datalist = result.data.data;

	// 		//判断上一页
	// 		if (mypage == 1) {

	// 		this.lastpage = 0;

	// 		} else {

	// 		this.lastpage = mypage - 1;

	// 		}

	// 		//计算总页数
	// 		this.all = Math.ceil(result.data.total / this.size);

	// 		//判断下一页
	// 		if (mypage == this.all) {

	// 		this.nextpage = 0;

	// 		} else {

	// 		this.nextpage = mypage + 1;

	// 		}
    //   	});
	// },

	// 分页器事件
	change: function () {
		// 发送请求
		this.axios.get('http://127.0.0.1:8000/goodslist/',{
			params: {
			  page: this.pagination.page,
			  size: this.pagination.size
			}}).then((result) =>{

              console.log(result);
              this.datalist = result.data.data;
      })
	},

	// 幻灯片点击事件
	click: function (index, data) {
		console.log(data);

		// 点击跳转具体页面
		window.location.href = data.link;
	}
  }
}


</script>
 
<style>



</style>